<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 
    JSP Name : event01_list.jsp
    Description : 설명을 기술합니다.
    author jkKim
    since 2012. 5. 10.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 5. 10.     jkKim     최초 생성
--%>
<%@ include file="/WEB-INF/jsp/com/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/doctype.jspf" %>
<script type="text/javascript" src="/common/js/storybook/jquery.isotope.min.js"></script>
<script type="text/javascript" src="http://snsdev.hyundai.com/sns/hub?type=json"></script>
<script>
var blogNum = [[1,1,3],[1,2,2],[1,3,1],[2,1,2],[2,2,1],[3,1,1],[2,3],[3,2]];
//var blogNum = [[2,1],[1,2]];
//var facebookNum = [[2,1],[1,2]];
var facebookNum = [[1,1,1]];
var twitterNum = [[3]];
var youtubeNum = [[1,1,1]];
var global_content = [];

$(document).ready(function() {
    if(ssl_sns_data){
        var ABOUT_HYUNDAI = ssl_sns_data ["ABOUT_HYUNDAI"];
        var YOUNG_HYUNDAI = ssl_sns_data ["YOUNG_HYUNDAI"];
        var blue_members = ssl_sns_data ["blue_members"];
        var HYUNDAI_RECRUIT = ssl_sns_data ["HYUNDAI_RECRUIT"];
        var WORLDWIDE  = ssl_sns_data ["WORLDWIDE"];
         
        setSns(ABOUT_HYUNDAI,"ABOUT_HYUNDAI");
        setSns(YOUNG_HYUNDAI,"YOUNG_HYUNDAI");
        setSns(blue_members,"blue_members");
        setSns(HYUNDAI_RECRUIT,"HYUNDAI_RECRUIT");
        setSns(WORLDWIDE,"WORLDWIDE");
        var $container = $('.sns-contents');
            $container.isotope({
                masonry: {
                    columnWidth: 59
                }
        });
    }
});

function pushContentNum(arr,contentType,id){
    var tagetArr=[];
    if(contentType == "blog"){
        tagetArr=blogNum;
    }else if(contentType == "facebook"){
        tagetArr=facebookNum;
    }else if(contentType == "twitter"){
        tagetArr=twitterNum;
    }else if(contentType == "youtube"){
        tagetArr=youtubeNum;
    }
    
    var num = getRanDom(tagetArr.length);
    pushContent(arr, tagetArr[num], contentType,id);
}

function init(){
    global_content = [];
}

function pushContent(arr, arrNum,contentType, id){
    
    var maxlength = arr.length;
    var templength = 0;
    for(var i=0; i<arrNum.length; i++){
        var tempObj = {};
        tempObj['contentType'] = contentType;
        tempObj['id'] = id;
        var tempArr = [];
        templength = arrNum[i];
        if(maxlength > templength){
            for(var j=0; j<templength; j++){
                tempArr.push(arr.pop());
                maxlength--;
            }
            tempObj.arr = tempArr;
            global_content.push(tempObj);
        }else{
            
            for(var j=0; j<arr.length; j++){
                tempArr.push(arr.pop());
            }
            if(tempArr.length>0){
                tempObj.arr = tempArr;
                global_content.push(tempObj);
            }
        }
        templength =0;
    }
    
}

function setSns(sns,id){
    init();
    var snsJoin = ['blog','facebook','twitter','youtube'];
    var temp = 0;
    for(var i=0; i<snsJoin.length; i++){
        try{
        if(sns[snsJoin[i]]){
            FisherYates(sns[snsJoin[i]]);
            pushContentNum(sns[snsJoin[i]],snsJoin[i],id);
        }
        }catch(err){}
    } 
    setContent();
}
function FisherYates(A){
    if(A.length){
        var i=A.length;
        var temp;
        while(1<=--i){
            var j=Math.floor(Math.random()*(i+1));
            var tmp=A[j];
            A[j]=A[i];
            A[i]=tmp;
        }
    }
}

function getRanDom(count){
    var num = Math.floor(Math.random()*count);
    return num;
}

function setContent(){
    FisherYates(global_content);
    for(var i=0; i<global_content.length; i++){
        if(global_content[i].arr.length == 0){
            alert(0);
        }
        setContentHtml(global_content[i].contentType, global_content[i].arr, global_content[i].id);
    }
}
function setContentHtml(contentType, arr, id){
        var Html = '';
        if(contentType == "blog"){
            Html+='<div class="area">';
            Html+='<div class="blog-wrap">';
            for(var i=0; i<arr.length; i++){
                Html+='<div class="cell">';
                if(arr[i].image){
                    Html+='<img src="'+arr[i].image+'" alt="관련 이미지" class="thumb" />';
                }
                if(arr[i].title){
                    Html+='<p class="title"><a href="javascript:openPopup(\''+arr[i].link+'\')">'+arr[i].title+'</a></p>';
                }
                if(arr[i].description){
                    //arr[i].description = arr[i].description.replaceAll("&amp;","&");
                    //arr[i].description = arr[i].description.replaceAll("&nbsp;"," ");
                    //arr[i].description = arr[i].description.replaceAll("&nbsp;"," "); 
                    Html+='<p class="text"><a href="javascript:openPopup(\''+arr[i].link+'\')">'+arr[i].description+'</a></p>';
                }
                if(arr[i].category && arr[i].pubDate){
                    Html+='<p class="information">'+arr[i].category+' | '+arr[i].pubDate+'</p>';
                }
                Html+='</div>';
            }
            Html+='<p class="sources"><img src="images/showroom/icon_sns_blog.gif" alt="link BLOG" /></p>';
            Html+='</div>';
            Html+='</div>';
        }else if(contentType == "twitter"){
            Html+='<div class="area">';
            Html+='<div class="twitter-wrap"><ul>';
            for(var i=0; i<arr.length; i++){
                var tempHtml = '';
                if(arr[i].image){
                    Html+='<img src="'+arr[i].image+'" alt="관련 이미지" class="thumb" />';
                }
                if(arr[i].title){
                    Html+='<p class="title">'+arr[i].title+'</p>';
                }
                if(arr[i].con){
                    Html+='<li>';
                    Html+='<dl class="twitter-content">';
                    Html+='<dt>'+id+'</dt>';
                    Html+='<dd><a href="javascript:openPopup(\''+arr[i].link+'\')">'+arr[i].con+'</a></dd>';
                    Html+='</dl>';
                    Html+='<p class="information">'+arr[i].pubDate+'</p>';
                    Html+='</li>';
                }
                
            }
            Html+='<p class="sources"><img src="images/showroom/icon_sns_twitter.gif" alt="Join the conversation TWITTER" /></p>';
            Html+='</ul></div>';
            Html+='</div>';
        }else if(contentType == "youtube"){
            Html+='<div class="area">';
            Html+='<div class="youtube-wrap">';
            for(var i=0; i<arr.length; i++){
                if(arr[i].thumbURL){
                    Html+='<img src="'+arr[i].thumbURL+'" alt="관련 이미지" class="thumb" />';
                }
                if(arr[i].title){
                    Html+='<p class="title"><a href="javascript:openPopup(\''+arr[i].URL+'\')">'+arr[i].title+'</a></p>';
                }
                if(arr[i].con){
                    Html+='<p class="text"><a href="javascript:openPopup(\''+arr[i].URL+'\')">'+arr[i].con+'</a></p>';
                }

                if(arr[i].pubDate){
                    Html+='<p class="information">'+arr[i].pubDate+'</p>';
                }
                if(arr[i].hit){
                    Html+='<p class="hit">HIT : '+arr[i].hit+'</p>';
                }
            }
            Html+='<p class="sources"><img src="images/showroom/icon_sns_youtube.gif" alt="link YOUTUBE" /></p>';
            Html+='</div>';
            Html+='</div>';
        }else if(contentType == "facebook"){
            Html+='<div class="area">';
            Html+='<div class="facebook-wrap">';
            for(var i=0; i<arr.length; i++){
                Html+='<div class="cell">';
                if(arr[i].picture){
                    Html+='<img src="'+arr[i].picture+'" alt="관련 이미지" class="thumb" />';
                }
                Html+='<dl class="facebook-content">';

                if(arr[i].message){
                    Html+='<dd><a href="javascript:openPopup(\''+arr[i].link+'\')">'+arr[i].message+'</a></dd>';
                }
                Html+='</dl>';
                Html+='<p class="information">';
                //Html+='<a href="javascript:openPopup(\''+arr[i].link+'\')">';
                Html+='<p class="information">'+arr[i].pubDate+'</p>';
                //Html+='</a>';
                Html+='</p>';

                //Html+='<button class="favorite" title="좋아요" type="submit" name="like">';
                //Html+='<a href="'+arr[i].link+'">';
                //Html+='<img src="images/showroom/btn_favorite.gif" alt="좋아요" />';
                //Html+='</a>';
                //Html+='</button>';
                
                
                
                Html+='</div>';
            }
            Html+='<p class="sources"><img src="images/showroom/icon_sns_facebook.gif" alt="Join the conversation FACEBOOK" /></p>';
            Html+='</div>';
            Html+='</div>';
        }
        $("#"+id).append($(Html));

}

</script>
</head>
<body>
<%@ include file="/WEB-INF/jsp/com/include/layerpopup.jspf" %>
<div id="wrap" class="non-subnavigation03">
	<%@ include file="/WEB-INF/jsp/com/include/navi_utill.jspf" %>
    <%@ include file="/WEB-INF/jsp/com/include/navi_header.jspf" %>
	<hr />

	<%@ include file="/WEB-INF/jsp/com/include/sub_header_global05.jspf" %>
	<hr />

	<div id="container">
		<div id="subtitle-area"><div class="subtitle-area-inner">
			<div id="location">
				<a href="#" class="home">홈</a>
				<a href="#">서비스</a>
				<a href="#">서비스네트워크</a>
				<em>서비스 네트워크 조회</em>
			</div>
		</div></div>
		<div class="social-community-wrap"><div class="social-community-inner">
			<dl>
				<dt><img src="/images/global_menu/txt_global_menu05_01.gif" alt="BLOG" /></dt>
				<dd>
					<ul>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_05.gif" alt="현대자동차" /></a></li>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_06.gif" alt="영현대" /></a></li>
					</ul>
				</dd>
			</dl>
			<dl>
				<dt><img src="/images/global_menu/txt_global_menu05_02.gif" alt="FACEBOOK" /></dt>
				<dd>
					<ul>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_05.gif" alt="현대자동차" /></a></li>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_06.gif" alt="영현대" /></a></li>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_08.gif" alt="blue members" /></a></li>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_09.gif" alt="현대자동차 채용" /></a></li>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_10.gif" alt="WORLDWIDE" /></a></li>
					</ul>
				</dd>
			</dl>
			<dl>
				<dt><img src="/images/global_menu/txt_global_menu05_03.gif" alt="TWITTER" /></dt>
				<dd>
					<ul>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_11.gif" alt="현대자동차 공식 트위터" /></a></li>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_06.gif" alt="영현대" /></a></li>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_08.gif" alt="blue members" /></a></li>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_09.gif" alt="현대자동차 채용" /></a></li>
					</ul>
				</dd>
			</dl>
			<dl>
				<dt><img src="/images/global_menu/txt_global_menu05_04.gif" alt="YOUTUBE" /></dt>
				<dd>
					<ul>
						<li><a href="#"><img src="/images/global_menu/txt_global_menu05_12.gif" alt="현대자동차 공식채널" /></a></li>
					</ul>
				</dd>
			</dl>
		</div></div>

		<div class="social-service-navigation-wrap">
			<div class="social-service-navigation">
				<ul>
					<li><a href="#sns-area1"><img src="/images/global_menu/social_menu01.gif" alt="ABOUT HYUNDAI" /></a></li>
					<li><a href="#sns-area2"><img src="/images/global_menu/social_menu02.gif" alt="YOUNG HYUNDAI" /></a></li>
					<li><a href="#sns-area3"><img src="/images/global_menu/social_menu03.gif" alt="blue members" /></a></li>
					<li><a href="#sns-area4"><img src="/images/global_menu/social_menu04.gif" alt="HYUNDAI 인재채용" /></a></li>
					<li><a href="#sns-area5"><img src="/images/global_menu/social_menu06.gif" alt="WORLDWIDE" /></a></li>
				</ul>
			</div>
		</div>
		<div class="social-contents-wrap">
			<div id="sns-area1" class="social-contents"><div class="social-contents-inner">
				<h4><img src="/images/title/h4_global_menu05_01.gif" alt="ABOUT HYUNDAI" /></h4>
				<div class="sns-contents" id="ABOUT_HYUNDAI">
					
			    </div>
            </div></div>
			<div id="sns-area2" class="social-contents even"><div class="social-contents-inner">
				<h4><img src="/images/title/h4_global_menu05_02.gif" alt="YOUNG HYUNDAI" /></h4>
				<div class="sns-contents" id="YOUNG_HYUNDAI">
					
				</div>
			</div></div>

			<div id="sns-area3" class="social-contents"><div class="social-contents-inner">
				<h4><img src="/images/title/h4_global_menu05_03.gif" alt="blue members" /></h4>
				<div class="sns-contents" id="blue_members">
					
				</div>
			</div></div>
            <div id="sns-area4" class="social-contents even"><div class="social-contents-inner">
                <h4><img src="/images/title/h4_global_menu05_04.gif" alt="HYUNDAI 인재채용" /></h4>
                <div class="sns-contents" id="HYUNDAI_RECRUIT">
                    
                </div>
            </div></div>
			<div id="sns-area5" class="social-contents even"><div class="social-contents-inner">
                <h4><img src="/images/title/h4_global_menu05_06.gif" alt="WORLDWIDE" /></h4> 
				<div class="sns-contents" id="WORLDWIDE">

				</div>
			</div></div>
			<script type="text/javascript">
			//var $container = $('.sns-contents');
			// initialize isotope
			//$container.isotope({
				//masonry: {
					//columnWidth: 59
				//}
			//});
			</script>
		</div>

	</div>
<!-- cidow_130411 -->
</div>
<!-- //cidow_130411 -->
	<hr />
	<%@ include file="/WEB-INF/jsp/com/include/footer.jspf" %>